
const $ = ele => document.querySelector(ele);

// 函数的参数过多时，先后顺序很难记住

// 默认值只有写在参数列表中的后面才有效

// 解决方案: 参数列表的以对象的形式

const ajax = options => {
    const {
        // 数据请求方式
        type,
        // 后端返回的数据类型  dataType  默认为json
        dataType = 'json',
        // 前端携带的参数  data  默认为{}
        data = {},
        successCB,
        path,
        async = true
    } = options;

    // 把数据格式改成 key1=v1&key2=v2 
    let params = '';    // params 参数
    for (let key in data) {
        params += `${key}=${data[key]}&`;
    }
    params = params.substring(0, params.length - 1);

    // 做请求

    const xhr = new XMLHttpRequest();
    // 区分请求方式
    if (type.toLowerCase() === 'get') {
        xhr.open('get', path + '?' + params, async);
        xhr.send()
    }
    else if (type.toLowerCase() === 'post') {
        xhr.open('post', path, async);
        // 设置请求头，为了让服务端正确的解析数据格式
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(params);
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let res = xhr.responseText;
            // 如果是json格式，就直接转一下
            if (dataType.toLowerCase() === 'json') {
                res = JSON.parse(res);
            }
            successCB(res);
        }
    }
}







